<template>
  <BaseMainSlot>
    <!-- <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName==='1'">收起筛选</p>
              <p v-if="activeName===''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="queryPageList()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">单位名称</div>
            <el-input v-model="staffName" clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
    </template> -->
    <template v-slot:btnsBar>
      <CategoryBar :categoryList="categoryList" @categoryBar="categoryBar" />
    </template>
    <template v-slot:categoryBox></template>
    <template v-slot:content>
      <div class="content-view">
        <div class="table-view">
          <div class="title"><span>用药记录</span></div>
          <div class="table-body">
            <el-table ref="tableData" v-loading="loading" highlight-current-row :data="tableData" stripe border
              height="calc(100% - 66px)" @row-click="handleRowClick" :row-key="row => { return row.diseaseRecordId; }"
              @selection-change="handleSelectionChange" @select="select" @select-all="selectAll">
              <el-table-column type="selection" width="55" :reserve-selection="true"
                :selectable="(row) => { return !row.selectable }" />
              <el-table-column type="index" label="序号" width="50">
                <template slot-scope="scoped">{{ scoped.row.diseaseRecordId ? scoped.$index + 1 : '' }}</template>
              </el-table-column>
              <el-table-column prop="diseaseName" label="疫病名称" />
              <el-table-column prop="num" label="患病数量（尾）" />
              <el-table-column prop="pondName" label="发病鱼塘名称" />
              <el-table-column prop="mnecode" label="发病批次编号" />
              <!-- <el-table-column prop="productionBatchCode" label="码单号" /> -->
              <el-table-column prop="discoverStaffName" label="发现人" />
              <el-table-column prop="happenTime" label="发现时间" />
              <el-table-column v-if="dealFlag" label="详情">
                <template v-if="scoped.row.diseaseRecordId" slot-scope="scoped">
                  <p style="color: #0580fb !important; cursor: pointer;" @click="completeInfo(scoped.row)">处理详情</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template v-if="scoped.row.diseaseRecordId" slot-scope="scoped">
                  <div class="table-btns-box">
                    <div @click="edit(scoped.row)">
                      <p style="color: #0580fb !important; cursor: pointer;">{{
                        scoped.row.dealFlag ? '继续处理' : '处理' }}</p>
                    </div>
                    <div @click="comlete(scoped.row)">
                      <p v-if="scoped.row.dealFlag"
                        style="color: #67c23a !important; cursor: pointer;padding-left: 10px;">完成</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
              @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
          </div>
        </div>
        <div class="linechart-view" v-if="dealFlag">
          <div class="title"><span>直鱼趋势</span></div>
          <div class="linechart-body">
            <DeathTrendDialog :edit-object="deadTrendData" />
          </div>
        </div>
      </div>
      <DealDialog ref="addEditDialog" :now-chance-stau="nowChanceStau" :edit-object="editObject"
        :show.sync="showAddEditDialog" @closeDialog="closeDialog" @cancelDialog="cancel" />
      <CompleteInfoDialog ref="completeInfoDialog" :complete-info-object="completeInfoObject"
        :show.sync="showCompleteInfoDialog" @closeDialog="closeDialog" @cancelDialog="cancelInfo"
        @editRecord="editRecord" />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import CategoryBar from "@/components/CategoryBar";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new2.vue";
import DealDialog from "./components/deal-dialog.vue";
import DeathTrendDialog from "./components/death-trend-dialog.vue";
import CompleteInfoDialog from "./components/complete-info-dialog.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";

import HealthTaskManagementApi from "@/api/health-management/health-task-management";
export default {
  name: "HealthTaskHandling",
  components: {
    ActionBar,
    Pagination,
    BaseMainSlot,
    DealDialog,
    CategoryBar,
    DeathTrendDialog,
    CompleteInfoDialog
  },
  mixins: [mymixin],
  data () {
    return {
      // 查询条件
      staffName: "",
      dealFlag: "",
      checkedIdList: [],
      deadTrendData: {},
      categoryList: [
        { id: 0, mark: "dealFlag", name: "未处理", value: false },
        { id: 1, mark: "dealFlag", name: "已处理", value: true }
      ],
      showDeadTrend: false,
      completeInfoObject: {},
      showCompleteInfoDialog: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created () {
    // this.queryPageList();
  },
  mounted () { },
  methods: {
    categoryBar (item) {
      this.dealFlag = "";
      if (item.mark === "dealFlag") this.dealFlag = item.value;
      this.queryPageList();
    },
    handleRowClick (row) {
      if (row.diseaseRecordId && this.dealFlag === true) {
        this.deadTrendData = JSON.parse(JSON.stringify(row));
      }
      // console.log(row);
    },
    // 点击详情
    completeInfo (row) {
      if (row.productionBatchId) {
        this.completeInfoObject = JSON.parse(JSON.stringify(row));
        this.showCompleteInfoDialog = true;
      }
    },
    queryPageList () {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          completeFlag: false
        }
      };
      if (this.dealFlag !== "") params.entity.dealFlag = this.dealFlag;
      HealthTaskManagementApi.queryPageByCondition(params).then(res => {
        if (res.success === true) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    comlete (data) {
      this.$confirm("完成后不可继续处理, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          let d = new Date()
          console.log({ diseaseRecordId: data.diseaseRecordId, completeTime: this.formatDateTimeMHS(d) });
          HealthTaskManagementApi.complete({ diseaseRecordId: data.diseaseRecordId, completeTime: this.formatDateTimeMHS(d) }).then(res => {
            if (res.success) {
              this.$message.success("操作成功");
              this.queryPageList();
              this.resetActionBar();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 单个删除
    delOne (data) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          HealthTaskManagementApi.delById(data.diseaseRecordId).then(res => {
            if (res.success) {
              this.$message.success("删除成功");
              this.queryPageList();
              this.resetActionBar();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 表格删除
    delmessage () {
      HealthTaskManagementApi.delListById({ idList: this.checkedIdList }).then(
        res => {
          if (res.success) {
            this.$message.success("删除成功");
            this.queryPageList();
            this.resetActionBar();
          }
        }
      );
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize;
      this.queryPageList();
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    selectAll (list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.diseaseRecordId) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    select (list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.diseaseRecordId) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    handleSelectionChange (list) {
      this.checkedIdList = [];
      let notvalue = true;
      let emptyList = [];
      this.checkedIdList = list.map(item => {
        if (item.diseaseRecordId) {
          return item.diseaseRecordId;
        } else {
          notvalue = false;
          emptyList.push(item);
          return "";
        }
      });
      if (notvalue === false) {
        // this.$message.warning("不可选择空数据！");
        this.toggleNoSelection(emptyList);
        return;
      }
      if (this.checkedIdList.length >= 1) this.delActive = true;
      else this.delActive = false;
    },
    // 添加
    add () {
      this.nowChanceStau = "add";
      this.editObject = JSON.parse(JSON.stringify(row));
      this.showAddEditDialog = true;
    },
    // 修改
    edit (row) {
      if (row.diseaseRecordId) {
        this.editObject = JSON.parse(JSON.stringify(row));
        this.nowChanceStau = "add";
        this.showAddEditDialog = true;
      } else {
        this.editObject = {};
      }
    },
    editRecord (row) {
      if (row.diseaseRecordId) {
        this.editObject = JSON.parse(JSON.stringify(row));
        this.nowChanceStau = "edit";
        this.showAddEditDialog = true;
      } else {
        this.editObject = {};
      }
    },
    cancel () {
      this.nowChanceStau = '';
      this.editObject = {}
      this.showAddEditDialog = false
      this.resetActionBar()
    },
    cancelInfo () {
      this.showCompleteInfoDialog = false;
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  width: calc(100% - 20px);
}

::v-deep .current-row {
  // width: calc(100% - 20px);
  background-color: red;
}

.content-view {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;

  &::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 6px;
    border-radius: 3px;
    background-color: #0480fb;
    left: 50%;
    transform: translate(-50%, -50%);
    // overflow: visible;
  }

  .title {
    width: 100%;
    height: 50px;
    background-color: #d6ebfe;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #0580fb;
  }

  .table-view {
    height: 100%;
    flex: 1;

    .table-body {
      position: relative;
      height: calc(100% - 50px);
      width: 100%;
      padding: 20px 10px;
      border-right: 1px solid #ccc;
    }
  }

  .linechart-view {
    width: 600px;
    height: 100%;

    .linechart-body {
      height: calc(100% - 80px);
    }
  }
}
</style>
